<template>
  <div>
    <FormPanel ref="form" :list="form" :cols="4" :labelWidth="90" :isSubmitBtn="false" @formChange="false" />
    <div>
      <LazyLoadTab v-model="activeName" :tabMenus="menus"></LazyLoadTab>
    </div>
  </div>
</template>

<script>
import { dictionary } from '@/utils/dictMixin';
import { getPartAccount } from '@/api/part/accountQuery/accountCheck';
export default {
  name: 'accountCheck',
  mixins: [dictionary],
  data() {
    return {
      form: this.createForm(),
      activeName: '收款明细',
      menus: [
        {
          title: '收款明细',
          path: 'part/accountQuery/accountCheck/accountRecieveInfo'
        },
        {
          title: '金额使用明细',
          path: 'part/accountQuery/accountCheck/accountUseInfo'
        },
        {
          title: '金额占用明细',
          path: 'part/accountQuery/accountCheck/accountOccupyInfo'
        }
      ]
    };
  },
  mounted() {
    this.partAccount();
  },
  methods: {
    createForm() {
      return [
        {
          type: 'INPUT',
          label: '账户类型',
          fieldName: '1',
          initialValue: '配件账户',
          disabled: true
        },
        {
          type: 'INPUT',
          label: '期初', // 期初金额 = 收款-使用
          fieldName: 'stage',
          precision: 2,
          disabled: true
        },
        {
          type: 'INPUT',
          label: '收款金额',
          fieldName: 'receivables',
          precision: 2,
          disabled: true
        },
        {
          type: 'INPUT',
          label: '使用金额',
          fieldName: 'useamount',
          precision: 2,
          disabled: true
        },
        {
          type: 'INPUT',
          label: '财务余额', // 财务余额 = 期初+收款-使用
          fieldName: 'finance',
          precision: 2,
          disabled: true
        },
        {
          type: 'INPUT',
          label: '已结算',
          fieldName: '4',
          initialValue: 0,
          precision: 2,
          disabled: true
        },
        {
          type: 'INPUT',
          label: '未开发票',
          fieldName: '5',
          precision: 2,
          initialValue: 0,
          disabled: true
        },
        {
          type: 'INPUT',
          label: '未出库金额',
          fieldName: '6',
          precision: 2,
          initialValue: 0,
          disabled: true
        },
        {
          type: 'INPUT',
          label: '占用金额',
          fieldName: 'occupy',
          precision: 2,
          disabled: true
        },
        {
          type: 'INPUT',
          label: '可用金额', // 可用金额 = 财务余额-占用
          fieldName: 'available',
          precision: 2,
          disabled: true
        }
      ];
    },
    async partAccount() {
      let res = await getPartAccount();
      // 占用金额
      this.form.find(x => x.fieldName === 'occupy').initialValue = res.data.rows[0].occupy;
      // 收款金额
      this.form.find(x => x.fieldName === 'receivables').initialValue = res.data.rows[0].receivables;
      // 使用金额
      this.form.find(x => x.fieldName === 'useamount').initialValue = res.data.rows[0].useamount;
      // 期初金额 = 收款-使用
      this.form.find(x => x.fieldName === 'stage').initialValue = Number(res.data.rows[0].receivables) - Number(res.data.rows[0].useamount);
      // 财务余额 = 期初+收款-使用
      this.form.find(x => x.fieldName === 'finance').initialValue = Number(this.form.find(x => x.fieldName === 'stage').initialValue) * 2;
      // 可用金额 = 财务余额-占用
      this.form.find(x => x.fieldName === 'available').initialValue = Number(this.form.find(x => x.fieldName === 'finance').initialValue) - Number(res.data.rows[0].occupy);
    }
  }
};
</script>
